<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">创建</button>
    <button class="get">获取</button>
</body>
<script>

    // 如何获取cookie?
    // 1. cookie的存取都依赖于document.cookie
    // 2. cookie是以键值对形成存在的(字符串) => 存的时候是一条一条存储的(设置),取的时候一次性取出所有的cookie,以"; "分隔(获取)


    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];

    set.onclick = function () {
        // var date = new Date();
        // date.setDate(date.getDate() + 7);

        // document.cookie = "user=a123123;expires=" + date.toUTCString() + "; path=/";
        // document.cookie = "pwd=123123;expires=" + date.toUTCString() + "; path=/";
        // document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/";
        // document.cookie = "email=1272071495@qq.com;expires=" + date.toUTCString() + "; path=/";

        setCookie("user", "a123123", 31 * 24 * 60 * 60);
        setCookie("pwd", "123123", 31 * 24 * 60 * 60);
        setCookie("phone", "17386141517");
        setCookie("email", "1272071495@qq.com");
    }


    get.onclick = function () {
        console.log(1, document.cookie);

        // var cookie = document.cookie;
        // var data = {};
        // if (cookie) {
        //     var list = cookie.split("; ");
        //     // console.log(list);
        //     for (var i = 0; i < list.length; i++) {
        //         var item = list[i]; // 'user=a123123', 'pwd=123123'
        //         var key = item.split("=")[0];
        //         var val = item.split("=")[1];
        //         data[key] = val;
        //     }
        // }
        // console.log(data);

        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("age"));
    }


    // setCookie(key, val, expires, path = "/")

    function setCookie(key, val, expires, path = "/") {
        if (expires != undefined) { // 有参数
            var date = new Date();
            date.setSeconds(date.getSeconds() + expires);
            document.cookie = key + "=" + val + "; expires=" + date.toUTCString() + "; path=" + path;
        } else {
            document.cookie = key + "=" + val + "; path=" + path;
        }
    }



    // getCookie(key)

    // function getCookie(key) {
    //     var cookie = document.cookie;
    //     var data = {};
    //     if (cookie) {
    //         var list = cookie.split("; ");
    //         // console.log(list);
    //         for (var i = 0; i < list.length; i++) {
    //             var item = list[i]; // 'user=a123123', 'pwd=123123'
    //             var name = item.split("=")[0];
    //             var val = item.split("=")[1];
    //             data[name] = val;
    //         }
    //     }
    //     // console.log(data);
    //     return data[key] ? data[key] : "";
    // }

    function getCookie(key) { // 传入的键名
        var cookie = document.cookie;
        if (cookie) {
            var list = cookie.split("; ");
            // console.log(list);

            for (var i = 0; i < list.length; i++) {
                var item = list[i]; // 'user=a123123', 'pwd=123123'
                var name = item.split("=")[0];  // 解析的键名
                var val = item.split("=")[1];

                if (name === key) {
                    return val;
                }
            }
        }
        // console.log(data);
        return "";
    }



</script>

</html>